<template>
    <n-grid cols="2 m:4" class="p-12" item-responsive responsive="screen">
        <template v-for="course in courseList">
            <n-gi class="m-2">
                <n-card :title="course.courseName">
                        <n-p>
                            教师:{{ course.teacherName }}
                        </n-p>
                        <n-p>
                            学年:{{ course.createTime }}
                        </n-p>
                    <template #action>
                    <n-space justify="space-around">
                        <n-button @click="handleIntoCourse(course.courseID)" type="primary">进入课程</n-button>
                        <n-button @click="handleIntoCourseCount(course.courseID)" type="success" secondary>我的统计</n-button>
                        </n-space>
                    </template>
                </n-card>
            </n-gi>
        </template>
    </n-grid>
</template>
<script lang="ts" setup>
import { http } from '@/utils/http/axios';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

function handleIntoCourse(courseID){
    router.push({name:"student_course_detail",params:{courseID:courseID}})
}

const courseList = ref();

function handleIntoCourseCount(courseID){
    router.push({name:"student_course_count",params:{courseID:courseID}})
}

onMounted(async () => {
    courseList.value = await http.request(
        {
            url: '/student/student_course/listMyCourse'
        }
    );
})
</script>